<!-- NumberStep -->
<template>
  <div class="number-stepper">
    <transition name="move">
      <div v-show="item.menuNum > 0" class="step-decrease" @click="decrease($event)">
        <span class="inner"><i class="el-icon-minus" /></span>
      </div>
    </transition>
    <div v-show="item.menuNum > 0" class="menu-num">{{ item.menuNum }}</div>
    <div class="step-add" @click="add($event)"><i class="el-icon-plus" /></div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'NumberStepper',
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      menu: {}
    }
  },
  created() {
    this.menu = this.item
  },
  // 方法
  methods: {
    // 增加数量
    add(event) {
      if (!this.item.menuNum) {
        Vue.set(this.item, 'menuNum', 1)
      } else {
        this.item.menuNum++
      }
      console.log(this.item)
    },
    // 减少数量
    decrease(event) {
      // if (!event._constructed) { // 阻止pc端点击后执行两次
      //   return
      // }
      if (this.item.menuNum) {
        this.item.menuNum--
      }
    }
  }
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.number-stepper {
  font-size: 0;
}
.step-decrease {
  display: inline-block;
  padding: 0px;
  transition: all 0.4s linear;
}
.inner {
  display: inline-block;
  padding: 2px 2px;
  font-size: 16px;
  line-height: 11px;
  font-weight: bold;
  // border-radius: 50%;
  background-color: #409EFF;
  color: white;
}
.menu-num {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  line-height: 14px;
  padding: 4px 12px 0;
  font-weight: 700px;
  color: rgb(147,153,159);
  // background-color: yellowgreen;
}
.step-add {
  display: inline-block;
  padding: 2px;
  font-size: 16px;
  line-height: 11px;
  font-weight: 700px;
  // border-radius: 50%;
  background-color: #409EFF;
  color:  white;
}
</style>
